<template>
  <div class="vipUser">
    <el-header style="text-align: right; font-size: 12px">
      <el-dropdown>
        <i class="el-icon-setting" style="margin-right: 15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人资料</el-dropdown-item>
          <el-dropdown-item>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span>{{username}}</span>
    </el-header>
    <el-main>
      <!-- 帐号列表 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>VIP用户帐号列表</span>
          <el-button style="float: right; padding: 3px 0" type="text">添加</el-button>
          <el-input
            v-model="search"
            size="small"
            placeholder="输入关键字搜索用户"
            prefix-icon="el-icon-search"
          />
        </div>
        <div class="text item">
          <!-- 表格 -->
          <template>
            <el-table
              :data="tableData.filter(data => !search || 
              data.username.toLowerCase().includes(search.toLowerCase())|| 
              data.username.toLowerCase().includes(search.toLowerCase())|| 
              data.realname.toLowerCase().includes(search.toLowerCase())|| 
              data.sex.toLowerCase().includes(search.toLowerCase())|| 
              data.age.toLowerCase().includes(search.toLowerCase())|| 
              data.phone.toLowerCase().includes(search.toLowerCase())|| 
              data.email.toLowerCase().includes(search.toLowerCase())|| 
              data.idType.toLowerCase().includes(search.toLowerCase()))"
              stripe
              style="width: 100%"
            >
              <el-table-column prop="username" label="VIP用户名" width="130"></el-table-column>
              <el-table-column prop="realname" label="实名" width="130"></el-table-column>
              <el-table-column prop="sex" label="性别" width="110"></el-table-column>
              <el-table-column prop="age" label="年龄" width="110"></el-table-column>
              <el-table-column prop="phone" label="联系电话" width="180"></el-table-column>
              <el-table-column prop="email" label="电子邮箱" width="230"></el-table-column>
              <el-table-column prop="idType" label="身份证号码"></el-table-column>
              <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                  <el-button size="mini" @click="handleEdit(scope, scope.row.id)">修改</el-button>
                  <el-button size="mini" type="danger" @click="handleDelete(scope, scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
      </el-card>
    </el-main>
  </div>
</template>
<script>
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  name: "vipUser",
  data() {
    return {
      tableData: [],
      search: ""
    };
  },
  created() {
    /* this.addList().then(() => {
        //过滤年龄大于23岁的定义为VIP用户
      this.tableData = this.userList.filter(v => v.age > 23);
    }); */

    /* this.addList().then(() => {
      //过滤年龄大于23岁的定义为VIP用户
      this.tableData = this.$store.getters.vipUsers;
    }); */

    this.addList().then(() => {
      //过滤年龄大于23岁的定义为VIP用户
      this.tableData = this.vipUsers;
    });
  },
  computed: {
    ...mapState({
      userList: state => state.userList,
      username: state => state.userinfo.username
    }),
    ...mapGetters({
      vipUsers: "vipUsers"
    })
  },
  methods: {
    ...mapActions({
      addList: "get_userList"
    }),
    /* 修改 */
    handleEdit(index, id) {
      console.log("修改", index, id);
    },
    /* 删除 */
    handleDelete(index, id) {
      console.log("删除", index, id);
    }
  }
};
</script>
<style scoped>
.vipUser {
  width: 100%;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.el-card__header .el-input {
  width: 30%;
  float: right;
  margin: 0 150px 0px 0;
}
</style>
